<!-- 线条流动按钮-->
<template>
       <div class="btn">
            <button class="button">
                {{ $props.title }}
                <div class="button_hor"></div>
                <div class="button_ver"></div>
            </button>
         </div>
</template>

<script lang="ts" name="flowingLineButton">
export default {
    props: {
        title: {
            type: String,
            default: ''
        }
    },
}  
</script>

<style lang="less" scoped>
.btn{
    margin: 0;
    padding: 0;
    .button{
        margin: 100px;
        width: 160px;
        height: 46px;
        border: none;
        background-color: transparent;
        color:rgba(41, 142, 245, 1);
        font-size: 16px;
        box-shadow: inset 0 0 0 2px currentColor;
        position: relative;
        z-index: 2;
        &_hor{
            position: absolute;
            top: 0;
            bottom: 0;
            left: -10px;
            right: -10px;
            border-top: 2px solid currentColor;
            border-bottom: 2px solid currentColor;
            animation: traHor 1.5s ease infinite;

            &::before{
                content: "";
                position: absolute;
                border: inherit;
                top:-10px;
                bottom:-10px;
                left: 10px;
                right: 10px;
            }
        }
        &_ver{
            position: absolute;
            top: -12px;
            bottom: -12px;
            left: 0;
            right: 0;
            border-left: 2px solid currentColor;
            border-right: 2px solid currentColor;
            animation: traVer 2s linear infinite;

            &::before{
                content: ""; 
                position: absolute;
                border: inherit;
                top:10px;
                bottom:10px;
                left: -12px;
                right: -12px;
            }
        }
    
    @keyframes traHor {
        100%{
            transform: scaleX(0);
        }
        
    }
    @keyframes traVer {
        100%{
            transform: scaleY(0);
        }
        
    }
    }
}
</style>
